import IconFont from '@/components/IconFont';
import TextArea from 'antd/lib/input/TextArea';
import { useEffect, useState } from 'react';
import Typography from '../Typography';
import Style from './index.module.less';

export function CommonTextarea(props) {
  const { showCount, placeholder, showEditIcon, ...arg } = props;
  const [isShowPlaceholder, setIsShowPlaceholder] = useState(!arg.value);

  arg.style = arg.style || {};
  if (showCount && !arg.style['resize']) {
    arg.style['resize'] = 'none';
  }

  useEffect(() => {
    setIsShowPlaceholder(!arg.value);
  }, [arg.value]);

  let rightIcon = null;
  if (showEditIcon) {
    rightIcon = <IconFont style={{ cursor: 'pointer' }} type="icondirect-input" />;
  }

  return (
    <div className={Style['c-textarea-wrapper']}>
      <TextArea {...arg} style={{ resize: 'none', ...arg.style }} className={Style['textarea']} />
      {showCount && (
        <div className={Style['count-info']}>
          <Typography as="a1" color="#999">
            {props.value?.length || 0}
          </Typography>
          /
          <Typography as="a1" color="#B1B7C3">
            {props.maxLength}
          </Typography>
        </div>
      )}
      {placeholder && isShowPlaceholder && (
        <div className={Style['ant-textarea-placeholder']}>
          {!!arg['aria-required'] && <Typography type="error">*&nbsp;</Typography>}
          {placeholder}
        </div>
      )}
      {!!rightIcon && <div className={Style['right-icon']}>{rightIcon}</div>}
    </div>
  );
}
export default CommonTextarea;
